<template>
  <view>
    <view class="comment-main">
      <view class="avaName">
        <img :src="comment.avatar" alt="">
        <span>{{comment.nickName}}</span>
      </view>
      <view class="commentNR">
        <p>{{comment.comment}}</p>
      </view>
      <view class="commentDate">
        <p>{{comment.time}}</p>
        <view class="good">
          <u-icon name="thumb-up" :label="comment.good" labelSize="12px" labelColor="#aaa"></u-icon>
        </view>
      </view>
    </view>
    <view class="comment">
      <view class="comment-one" v-for="(item,index) in comment.moreComment" :key="index">
        <view class="avaName">
          <img :src="item.avatar" alt="">
          <span>{{item.nickName}}</span>
        </view>
        <view class="commentNR">
          <p>{{item.comment}}</p>
        </view>
        <view class="commentDate">
          <p>{{item.time}}</p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        comment: null
      };
    },
    async onLoad(item) {
      this.comment = JSON.parse(item.comment)
    }
  }
</script>

<style lang="scss">
  .comment {
    width: 100%;
    height: auto;
    padding-bottom: 100px;
  }

  .comment-main {
    width: 100%;
    height: auto;
    padding-top: 15px;
    margin-bottom: 10px;
    background-color: #fff;
  }

  .comment-one {
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }

  .avaName {
    overflow: hidden;
    margin: 0 10px;

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      vertical-align: middle;
    }

    span {
      font-size: 14px;
      margin-left: 10px;
      vertical-align: middle;
    }
  }

  .commentNR {
    margin: 0 20px 10px 50px;
    word-break: break-all;
  }

  .commentDate {
    display: flex;
    justify-content: space-between;

    p {
      font-size: 12px;
      color: #aaa;
      margin: 0 0 10px 50px;
    }

    .good {
      float: left;
      width: 50px;
    }

  }
</style>
